<template>
	<gui-page :customHeader="true" :headerClass="['gui-bg-gray', 'gui-dark-bg-level-1']">
		<!-- 自定义头部导航 -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading @goHome="goHome"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h5 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-primary-text">搜索</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:120rpx;"></view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<!-- 页面主体 -->

		<!-- 吸顶 view -->
		<template v-slot:gFixedTop>

			<view class="gui-margin-top gui-flex gui-row">

				<view class="demo gui-block gui-dark-bg-level-3 gui-color-gray" style="margin-top: -75rpx;">

					<view class="gui-bg-white gui-dark-bg-level-3 gui-padding gui-margin-top"
						style="width: 145rpx;height: 100rpx;">
						<gui-datetime-between @confirm="confirm3" :startValue="startValue3" :endValue="endValue3"
							:isTime="false" v-if="startValue3 != ''">
							<text class="gui-block gui-icons gui-text-small">
								{{endValue3 == ''?startValue3:'住'+startValue3+'离'+endValue3}}</text>
						</gui-datetime-between>
					</view>


				</view>
				<!-- 自动占满 gui-flex1 -->
				<view class="demo gui-block gui-dark-bg-level-3 gui-color-gray gui-flex1" style="margin-top: -75rpx;">
					<view class="gui-bg-white gui-dark-bg-level-1 gui-padding gui-margin-top" style="height: 100rpx;">
						<gui-search @inputting="inputting" @confirm="confirm"></gui-search>
					</view>
				</view>
			</view>
			<view
				class="fixed-top-view gui-bg-white gui-dark-bg-level-3 gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center"
				slot="gFixedTop" id="fixed-top-view">
				<!-- 排序 -->
				<view class="graceSelectMenuItem">
					<gui-select-menu :items="selectMenu1" @select="select1"></gui-select-menu>
				</view>

				<view class="graceSelectMenuItem">
					<gui-order @change="priceOrder" :orderBy="orderByIndex" :limit="[1,2]">
						<text class="gui-text gui-block"
							:class="[orderIndex == 2 ? 'gui-color-red' : 'gui-primary-text']">价格</text>
					</gui-order>
				</view>
				<view class="graceSelectMenuItem" @tap="showScreening">
					<text class="gui-text gui-block gui-text-center gui-icons">筛选 &#xe686;</text>
				</view>
			</view>
		</template>
		<!-- 页面主体 加一个与吸顶元素等高的 margin-top 或 padding-top -->
		<template v-slot:gBody>
			<view class="gui-margin">
				<view class="gui-padding" style="margin-top: 105rpx;">
					<!-- 网络请求之前先展示虚拟骨架，一般用于占位 -->
					<!-- 如 : 展示 10条新闻骨架 -->
					<view v-if="!isLoad">
						<view class="news-list gui-flex gui-rows gui-space-between gui-nowrap"
							v-for="(itm, index) in 10" :key="index">
							<view class="news-img">
								<gui-skeleton :canShow="false"
									customStyle="width:200rpx; height:100rpx; border-radius:6rpx;"></gui-skeleton>
							</view>
							<view class="news-title">
								<gui-skeleton :canShow="false"
									customStyle="height:88rpx; border-radius:6rpx;"></gui-skeleton>
							</view>
						</view>
					</view>
					<!-- 循环展示新闻 -->
					<!-- 此处的数据来自api 请求完成，利用骨架加载实现真实项目渲染 -->
					<view v-if="isLoad">
						<view class="news-list gui-flex gui-row gui-space-between gui-nowrap"
							v-for="(item, idx) in artciles" :key="idx">
							<view class="news-img">
								<gui-skeleton customStyle="width:200rpx; height:280rpx;">
									<image :src="item.imgs[0]"
										style="width: 200rpx; height: 280rpx; border-radius: 10rpx;" mode="scaleToFill">
									</image>
								</gui-skeleton>
							</view>
							<view class="news-title">
								<gui-skeleton customStyle="border-radius:8rpx; height:70rpx;">
									<text class="gui-text gui-primary-text"
										style="font-weight: bold;font-size:30rpx; white-space: pre-wrap;">{{item.title}}</text>
								</gui-skeleton>
								<gui-skeleton customStyle="border-radius:8rpx; height:70rpx;">
									<view>
										<gui-star1> @change="change1" activecolor="#ffaa00" :totalstars="5" :starnum="3"
											:cantap="false"></gui-star1>
									</view>

								</gui-skeleton>
							</view>
						</view>
					</view>
				</view>

				<!-- 右侧弹出筛选 -->
				<gui-popup ref="guipopupright" position="right" width="580rpx" :top="rightAraeTop" :zIndex="9999">
					<view class="gui-flex1 gui-flex gui-column right-area gui-relative">
						<scroll-view class="gui-flex1 gui-bg-white gui-dark-bg-level-3" :scroll-y="true">
							<view style="padding-left:25rpx; padding-right:25rpx;">
								<view class="gui-margin-top">
									<text class="gui-text gui-color-gray">标签</text>
								</view>
								<view style="margin-top:15rpx;">
									<gui-stags :tags="sizes" :padding="30" :lineHeight="2.5" @change="sedSize"
										type="checkbox"></gui-stags>
								</view>
								<view class="gui-margin-top">
									<text class="gui-text gui-color-gray">价格区间</text>
								</view>
								<view style="margin-top:15rpx;"
									class="gui-flex gui-rows gui-nowrap gui-align-items-center">
									<input type="text"
										class="gui-form-input price-input gui-bg-gray gui-dark-bg-level-1"
										v-model="price1" />
									<text class="gui-block gui-color-gray" style="margin:20rpx;"> - </text>
									<input type="text"
										class="gui-form-input price-input gui-bg-gray gui-dark-bg-level-1"
										v-model="price2" />
								</view>

							</view>
						</scroll-view>
						<view class="right-area-footer gui-flex gui-row gui-nowrap gui-bg-white gui-dark-bg-level-1">
							<view class="right-area-footer-btn" hover-class="gui-tap" @tap="screeningReset">
								<text class="right-area-footer-btn gui-block gui-color-gray">重置</text>
							</view>
							<view class="right-area-footer-btn gui-bg-red" hover-class="gui-tap" @tap="screeningSubmit">
								<text class="right-area-footer-btn gui-block gui-color-white">提交</text>
							</view>
						</view>
					</view>
				</gui-popup>
			</view>

		</template>
	</gui-page>
</template>
<script>
	import artciles from '@/Grace6/demoData/article.js';
	import graceJS from "@/Grace6/js/grace.js";
	export default {
		data() {
			return {
				// 新闻列表数据
				artciles: null,
				// 是否加载
				isLoad: false,
				startValue3: "",
				endValue3: '',
				// 第 1 排序选择
				selectMenu1: ['综合', '好评优先', '距离优先'],
				// 默认颜色
				defColor: '#2B2E3D',
				// 选中颜色
				activeColor: '#FF0036',
				// 排序索引
				orderIndex: 0,
				// 价格排序索引
				orderByIndex: 0,
				// 尺寸标签
				sizes: [{
						id: 0,
						text: "免费停车场",
						checked: false
					},
					{
						id: 1,
						text: "包早餐",
						checked: false
					},
					{
						id: 2,
						text: "新用户折扣",
						checked: false
					},
					{
						id: 3,
						text: "下午5点退房",
						checked: false
					},
					{
						id: 4,
						text: "环境优美",
						checked: false
					},
					{
						id: 4,
						text: "评分高",
						checked: false
					}
				],
				sizeSed: null,
				price1: 100,
				price2: 999,
				// 右侧弹出层 top 值
				rightAraeTop: 0
			}
		},
		onLoad: function() {
			// 模拟 api 加载
			setTimeout(() => {
				this.isLoad = true;
				this.$nextTick(() => {
					this.artciles = [];
					this.artciles = artciles.articleList;
				});

			}, 1000);
			// 假设默认值来自api请求
			setTimeout(() => {
				this.startValue3 = "05/1";
				this.endValue3 = "05/2";
			}, );

		},
		onReady: function() {
			// 此处计算吸顶元素高度作为右侧弹出层的top值
			graceJS.select('#fixed-top-view', (res) => {
				this.rightAraeTop = res.height;
				// #ifdef H5
				this.rightAraeTop += 44;
				// #endif
			});
		},

		methods: {
			confirm3: function(res) {
				this.startValue3 = res[0][1] + '/' + res[0][2];
				this.endValue3 = res[1][1] + '/' + res[1][2];
			},
			goHome: function() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			// 第一个排序
			showMenu1: function() {
				this.show1 = true;
			},
			closeMenu1: function() {
				this.show1 = false;
			},
			select1: function(index, val) {
				// 获得选择项目后按照数据继续排序即可
				console.log("选择了 " + val);
				this.orderIndex = 0;
				this.orderByIndex = 0;
			},
			// 销量排序
			orderBySellNumber: function() {
				// 排序逻辑自己来实现
				this.orderIndex = 1;
				this.orderByIndex = 0;
			},
			// 价格排序
			priceOrder: function(e) {
				console.log(e);
				// 1 2 为价格排序 0 为默认排序
				if (e != 0) {
					this.orderIndex = 2;
				}
				this.orderByIndex = e;
			},
			// 展示筛选界面
			showScreening: function() {
				this.$refs.guipopupright.open();
			},
			// 选择尺寸
			sedSize: function(e) {
				this.sizeSed = e;
			},
			// 筛选提交
			screeningSubmit: function() {
				uni.showToast({
					icon: "none",
					title: "请观察控制台"
				});
				// 尺寸
				console.log(this.sizeSed);
				// 价格
				console.log(this.price1, this.price2);
				this.$refs.guipopupright.close();
			},
			// 重置筛选
			screeningReset: function() {
				this.sizes = [{
						id: 0,
						text: "30 cm",
						checked: false
					},
					{
						id: 1,
						text: "50 cm",
						checked: false
					},
					{
						id: 2,
						text: "60 cm",
						checked: false
					},
					{
						id: 3,
						text: "70 cm",
						checked: false
					},
					{
						id: 4,
						text: "80 cm",
						checked: false
					},
					{
						id: 4,
						text: "90 cm",
						checked: false
					}
				];
				this.price1 = 100;
				this.price2 = 999;
			},
			// 监听输入
			inputting: function(e) {
				console.log(e);
			},
			// 监听提交
			confirm: function(e) {
				console.log(e);
			},
			// 监听点击
			tapme: function() {
				uni.showToast({
					title: "被点了...."
				});
			},

		}
	}
</script>
<style scoped>
	/* 自定义吸顶元素样式 */
	.fixed-top-view {
		height: 100rpx;
	}

	.graceSelectMenuItem {
		width: 180rpx;
	}

	.price-input {
		width: 120rpx;
		padding: 10rpx 0;
		border-radius: 5rpx;
		text-align: center;
	}

	.right-area-footer {
		width: 580rpx;
		height: 100rpx;
	}

	.right-area-footer-btn {
		width: 290rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.news-list {
		margin-top: 25rpx;
	}

	.news-img {
		width: 200rpx;
		height: 280rpx;
		margin-right: 30rpx;
		overflow: hidden;
	}

	.news-title {
		width: 200rpx;
		flex: 1;
	}
</style>